<template>
	<view class="p-2">
		<view class="item p-2 mb-2" v-for="(item,index) in list" :key="index">
			<view>设备号: <text>{{item.device_number}}</text></view>
			<view>昵称: <text>{{item.name}}</text></view>
			<view>地址: <text>{{item.address}}</text></view>
			<view>时间: <text>{{item.createtime}}</text></view>
		</view>
		
		<view class="flex justify-center mt-3" v-if="list.length == 0">暂无预警记录</view>
	</view>
	
</template>

<script>
	import { postWarnLog } from "../../api/user.js";
	export default {
		data() {
			return {
				name: "",
				page: 1,
				limit: 10,
				list: [],
				total: 0,
			}
		},
		onLoad(option) {
			uni.showLoading({title: "加载中"});
			this.name = option.name;
			this.init();
		},
		methods: {
			async init(name){
				let data = {
					device_number: this.name,
					page: this.page,
					limit: this.limit,
					token: uni.getStorageSync('token')
				}
				var res = await postWarnLog(data);
				uni.hideLoading()
				if(res.data.code == 1){
					this.total = res.data.data.total;
					this.list.push(...res.data.data.list)
				}
			}
		},
		onReachBottom() {
			uni.showLoading({title: "加载中"})
			console.log(this.list.length, this.total)
			if(this.list.length < this.total) {
				++ this.page;
				this.init()
			} else {
				uni.hideLoading();
				uni.showToast({
					title: "没有更多了~",
					icon: "none"
				})
			}
		}
	}
</script>

<style>
page{
	background: #f5f4f4 !important;
}
.item{
	width: 100%;
	box-sizing: border-box;
	background-color: #ffff;
	border-radius: 10rpx;
	font-size: 26rpx;
	line-height: 40rpx;
	color: #969696;
}
.item text {
	margin-left: 6rpx;
}
</style>
